<template>
  <div class="app-container">
    <div class="page-container">
      <div class="d-flex flex-column align-center mt-5">
        <a-form
          ref="comBusinessContentRef"
          :model="form"
          :rules="rules"
          auto-label-width
          label-width="80px"
          :disabled="isDisabled"
          style="width: 1000px"
        >
          <!-- <a-form-item label="功能编码" field="functionCode">
            <a-input v-model="form.functionCode" placeholder="请输入功能编码" />
          </a-form-item> -->
          <a-form-item label="标题" field="title">
            <a-input v-model="form.title" placeholder="请输入标题" />
          </a-form-item>
          <a-form-item label="分类" field="classifyId">
            <a-select
              v-model="form.classifyId"
              placeholder="请选择样式类型"
              @change="chnangeClassify"
            >
              <a-option
                v-for="item in typeOptions"
                :key="item.classifyId"
                :label="item.classifyName"
                :value="item.classifyId"
              ></a-option>
            </a-select>
            <!-- <a-checkbox-group v-model="form.classifyIdList">
              <a-checkbox
                v-for="item in typeOptions"
                :key="item.value"
                :value="item.value"
                >{{ item.label }}</a-checkbox
              >
            </a-checkbox-group> -->
          </a-form-item>
          <a-form-item label="概述" field="summarize">
            <a-textarea v-model="form.summarize" placeholder="请输入内容" />
          </a-form-item>
          <a-form-item label="详情页标题" field="isShowTitle">
            <a-radio-group v-model="form.isShowTitle">
              <a-radio
                v-for="dict in is_show"
                :key="dict.value"
                :value="parseInt(dict.value)"
                >{{ dict.label }}</a-radio
              >
            </a-radio-group>
          </a-form-item>
          <a-form-item label="发布时间" field="isShowPublishTime">
            <a-radio-group v-model="form.isShowPublishTime">
              <a-radio
                v-for="dict in is_show"
                :key="dict.value"
                :value="parseInt(dict.value)"
                >{{ dict.label }}</a-radio
              >
            </a-radio-group>
          </a-form-item>
          <a-form-item label="来源" field="source">
            <a-input v-model="form.source" placeholder="请输入来源" />
          </a-form-item>
          <a-form-item v-if="isShowStyle" label="样式" field="styleType">
            <a-select
              v-model="form.styleType"
              placeholder="请选择样式类型"
              @change="form.img = ''"
            >
              <a-option
                v-for="dict in func_article_style"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              ></a-option>
            </a-select>
            <!-- <template #extra>
              <div>
                提示：此样式仅适用于分类列表为一行一列的情况；若分类列表样式为一行两列，
                则不支持此样式显示
              </div>
            </template> -->
          </a-form-item>

          <a-form-item
            v-if="!(isShowStyle && form.styleType == 5)"
            label="缩略图"
            field="img"
          >
            <image-upload
              v-model="form.img"
              :fileSize="1"
              :limit="form.styleType == 4 ? 3 : 1"
              :extraTip="
                '建议尺寸：' +
                imgTips[form.styleType].w +
                'px * ' +
                imgTips[form.styleType].h +
                'px'
              "
            />
          </a-form-item>
          <a-form-item label="内容" field="content">
            <wang-editor
              v-model="form.content"
              :disabled="isDisabled"
            ></wang-editor>
          </a-form-item>
          <!-- <a-form-item label="发布状态" field="publishStatus">
            <a-radio-group v-model="form.publishStatus">
              <a-radio
                v-for="dict in publish_status"
                :key="dict.value"
                :value="parseInt(dict.value)"
                >{{ dict.label }}</a-radio
              >
            </a-radio-group>
          </a-form-item> -->
          <a-form-item label="有效状态" field="effectiveStatus">
            <a-radio-group v-model="form.effectiveStatus">
              <a-radio
                v-for="dict in is_effective"
                :key="dict.value"
                :value="parseInt(dict.value)"
                >{{ dict.label }}</a-radio
              >
            </a-radio-group>
          </a-form-item>
        </a-form>
        <a-row justify="center" class="mt-10">
          <a-space>
            <a-button type="primary" @click="submitForm" :loading="okLoading"
              >提交</a-button
            >
            <a-button @click="goBack">返回</a-button>
          </a-space>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script setup name="ComBusinessContentAdd">
import {
  listComBusinessContent,
  getComBusinessContent,
  delComBusinessContent,
  addComBusinessContent,
  updateComBusinessContent,
  effectiveStatus
} from '@/api/common/comBusinessContent'

import { allListComBusinessClassify } from '@/api/common/comBusinessClassify'
import { Message } from '@arco-design/web-vue'

const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
const okLoading = ref(false)
const loading = ref(false)
const isDisabled = ref(false)
const typeOptions = ref([])
const comBusinessContentRef = ref(null)
const functionCode = ref(route.params.functionCode || null)

const { is_show, publish_status, is_effective, func_article_style } =
  proxy.useDict(
    'is_show',
    'publish_status',
    'is_effective',
    'func_article_style'
  )
const imgTips = ref({
  1: { w: 230, h: 180 },
  2: { w: 230, h: 180 },
  3: { w: 670, h: 360 },
  4: { w: 220, h: 180 },
  5: { w: 320, h: 320 }, // 一行两列
  6: { w: 670, h: 360 }
})
const data = reactive({
  form: {
    contentId: null,
    functionCode: functionCode.value,
    title: null,
    isShowTitle: 1,
    summarize: null,
    source: null,
    styleType: 1,
    isShowPublishTime: 1,
    publishStatus: 1,
    img: null,
    content: null,
    effectiveStatus: 1,
    classifyIdList: [],
    classifyId: null
  },
  rules: {
    title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
    isShowTitle: [
      { required: true, message: '详情页标题不能为空', trigger: 'change' }
    ],
    styleType: [
      { required: true, message: '样式类型不能为空', trigger: 'change' }
    ],
    isShowPublishTime: [
      { required: true, message: '发布时间不能为空', trigger: 'change' }
    ],
    content: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
    effectiveStatus: [
      { required: true, message: '有效状态不能为空', trigger: 'change' }
    ],
    publishStatus: [
      { required: true, message: '发布状态不能为空', trigger: 'change' }
    ],
    classifyId: [
      { required: true, message: '分类不能为空', trigger: 'change' }
    ],
    img: [{ required: true, message: '缩略图不能为空', trigger: 'change' }]
  }
})

const isShowStyle = computed(() => {
  const classify = typeOptions.value.find(
    (i) => i.classifyId == form.value.classifyId
  )
  return !classify ? true : classify.classifyStyle != 2
})

const { form, rules } = toRefs(data)
function goBack() {
  router.go(-1)
}
function chnangeClassify() {
  form.value.img = ''
  form.value.classifyIdList = [form.value.classifyId]
  const classify = typeOptions.value.find(
    (i) => i.classifyId == form.value.classifyId
  )
  if (classify.classifyStyle == 2) {
    form.value.styleType = 5
  } else {
    form.value.styleType = 1
  }
}
/** 提交按钮 */
function submitForm() {
  comBusinessContentRef.value.validate((valid) => {
    if (!valid) {
      const imgs = form.value.img.split(',')
      if (form.value.styleType == 4 && imgs.length !== 3) {
        Message.error('“三图并列”请上传3张图片')
        return false
      }
      okLoading.value = true
      if (form.value.contentId != null) {
        updateComBusinessContent(form.value)
          .then((response) => {
            Message.success('编辑成功')
            router.go(-1)
          })
          .finally(() => {
            okLoading.value = false
          })
      } else {
        addComBusinessContent(form.value)
          .then((response) => {
            Message.success('新增成功')
            router.go(-1)
          })
          .finally(() => {
            okLoading.value = false
          })
      }
    } else {
      const keys = Object.keys(valid)
      comBusinessContentRef.value.scrollToField(keys[0])
    }
  })
}

/** 编辑按钮操作 */
function handleUpdate() {
  if (route.params.contentId) {
    getComBusinessContent(route.params.contentId).then((response) => {
      form.value = response.data
      form.value.classifyId = form.value.classifyIdList[0]
    })
  }
}
function getTypeList() {
  allListComBusinessClassify({ functionCode: functionCode.value }).then(
    (response) => {
      typeOptions.value = response.data
    }
  )
}
getTypeList()
handleUpdate()
</script>
